import axios from "axios";
import React, { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";

let timer: NodeJS.Timer;
const Index: React.FC = () => {
  const [searchParams] = useSearchParams();
  const out_trade_no = searchParams.get("out_trade_no");
  const trade_no = searchParams.get("trade_no");
  const [message, setMessage] = useState("查询中...");
  const [count, setCount] = useState(1);
  const query = async () => {
    const resp = await axios.get("/api/pay/query", {
      params: { out_trade_no, trade_no },
    });
    setMessage(resp.data.message);
    if (resp.data.code === 200) {
      clearInterval(timer);
    }
  };

  useEffect(() => {
    timer = setInterval(() => {
      // setCount(count + 1);
      // console.log(count)
      // query();

      setCount((state) => {
        query();
        if (state >= 5) {
          clearInterval(timer);
        }
        return state + 1;
      });
    }, 2000);

    query();

    return () => {
      clearInterval(timer);
    };
  }, []);
  return <div>付款结果： {message}</div>;
};

export default Index;
